{% load static_url %}
<div class="accordion" id="hosts">
  <div class="card">
    <div class="card-header bg-body-tertiary" id="hosts_card">
      <button class="btn ara-card-collapse" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_hosts" aria-expanded="true" aria-controls="collapse_hosts">
        <h4>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hdd-rack" viewBox="0 0 16 16">
            <path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm2 7a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-2.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
            <path d="M2 2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h1v2H2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-1V7h1a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2zm13 2v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm0 7v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm-3-4v2H4V7h8z"/>
          </svg>
          Hosts
        </h4>
      </button>
    </div>
    <div id="collapse_hosts" class="collapse show" aria-labelledby="hosts_card" data-bs-parent="#hosts" style="max-height: 275px; overflow-y: auto;">
      <div class="card-body">
        {% if playbook.items.hosts %}
          <table class="table table-sm table-hover">
            <thead>
              <tr>
                <th class="report-column" title="Host results and facts (if facts were gathered)">Report</th>
                <th class="long-status-column" title="Status of the tasks for each host">Status</th>
                <th title="Host name">Hostname</th>
              </tr>
            </thead>
            <tbody>
            {% for host in hosts %}
              <tr>
                <td class="report-column">
                  {% url 'ui:host' host.id as host_url %}
                  <a role="button" class="btn btn-outline-primary btn-link btn-sm d-inline-flex justify-content-center align-items-center" href="{% static_url host_url %}">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
                    <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
                  </svg>
                  </a>
                </td>

                <td class="long-status-column">
                  {% if host.ok %}
                  <a role="button" class="btn btn-success btn-sm ara-result-status-badge" title="Search for tasks with status: ok" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=ok#results"{% endif %}>
                    {{ host.ok }}
                  </a>
                  {% endif %}
                  {% if host.changed %}
                  <a role="button" class="btn btn-warning btn-sm ara-result-status-badge" title="Search for tasks with status: changed" {% if not static_generation %}href="{% url 'ui:host' host.id %}?changed=True#results"{% endif %}>
                    {{ host.changed }}
                  </a>
                  {% endif %}
                  {% if host.failed or host.unreachable %}
                  <a role="button" class="btn btn-danger btn-sm ara-result-status-badge" title="Search for tasks with status: failed and unreachable" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=failed&status=unreachable#results"{% endif %}>
                    {{ host.failed |add:host.unreachable }}
                  </a>
                  {% endif %}
                  {% if host.skipped %}
                  <a role="button" class="btn btn-info btn-sm ara-result-status-badge" title="Search for tasks with status: skipped" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=skipped#results"{% endif %}>
                    {{ host.skipped }}
                  </a>
                  {% endif %}
                </td>

                <td>
                  <a {% if not static_generation %}href="{% url 'ui:host' host.id %}#host_facts_card" title="Show facts for {{ host.name }}"{% endif %}>
                    {{ host.name | truncatechars:75 }}
                  </a>
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        {% else %}
          <p>No recorded hosts found.</p>
          <p>The playbook might might have been interrupted or is in progress.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
